<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link rel="stylesheet" href="/static/js/layui255/layui/css/layui.css"/>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 36px;
        }
    </style>
    <script src="/static/plugins/jquery/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" style="margin-top: 15px ">
                <form class="layui-form" lay-filter="product">
                    <div class="form-search-con">
                        <div class="layui-form-item layui-row">
                            <div class="layui-col-md4">
                                <label class="layui-form-label">订单号</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="id" id="demoReload" autocomplete="off"
                                           placeholder="请输入订单号"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <label class="layui-form-label">产品名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="productName" id="productName" autocomplete="off"
                                           placeholder="请输入产品名称"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <button type="button" id="searchPro" style="background-color:#1E9FFF;margin-top: 5px"
                                        class="layui-btn layui-btn-sm" data-type="reload"><i
                                        class="layui-icon">&#xe615;</i>搜索
                                </button>
                                <button type="reset" style="background-color:#1E9FFF;margin-top: 5px"
                                        class="layui-btn layui-btn-sm" id="resetBtn"><i
                                        class="layui-icon">&#xe9aa;</i>重置
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                <table class="layui-hide" id="demo" lay-filter="test"></table>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/static/js/layui255/layui/layui.js"></script>

<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'layedit'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider//滑块
            , layedit = layui.layedit
            , $ = layui.jquery,form = layui.form;

        //日期
        table.render({
            elem: '#demo'
            , id: 'testReload'
            , url: '/order/getOrderInfo' //数据接口
            , title: '产品信息表'
            , page: true //开启分页
            , cols: [[ //表头
                {type: 'checkbox'}
                // {field: 'id', title: '序号', width: 70, sort: true, align: "center", totalRowText: '合计：'}
                , {field: 'order_id', title: '订单编号', width: 150, sort: true, align: "center",}
                , {
                    field: 'product_img',
                    title: '图片',
                    width: 130,
                    style: "height:100px",
                    align: "center",
                    templet: function (d) {
                        return `<img src="` + d.product_img + `" style="width: 100px;height: 80px"/>`;
                    }
                }
                , {field: 'product_name', title: '产品名称', width: 150, align: "center"}
                , {field: 'price', title: '单价', width: 60, align: "center", sort: true}
                , {field: 'buy_sum', title: '数量', width: 80, align: "center", sort: true}
                , {field: 'price_sum', title: '合计', width: 80, align: "center", sort: true}
                , {
                    field: 'status', title: '订单状态', width: 80, align: "center", templet: function (d) {
                        if (d.status === 0) {
                            return `<p style="color:red">待付款</p>`;
                        } else if (d.status === 1) {
                            return `<p style="color: #1ABC9C">待发货</p>`;
                        } else if (d.status === 2) {
                            return `<p style="color: #00FF00">待收货</p>`;
                        } else if (d.status === 3) {
                            return `<p style="color: #1c7430">已收货</p>`;
                        }
                    }
                }
                , {field: 'userAddress', title: '收货人地址', width: 100, align: "center",}
                , {field: 'tel', title: '手机号', width: 120, align: "center",}
                , {
                    field: 'create_time',
                    title: '下单时间',
                    width: 100,
                    sort: true,
                    align: "center",
                    templet: '<div>{{ layui.util.toDateString(d.createDate, "yyyy-MM-dd HH:mm:ss") }}</div>'
                }
                , {field: 'leave_message', title: '留言', width: 100, align: "center",}
                // , {field: 'product_id',width: 0, align: "center",}
                , {
                    field: 'status',
                    title: '操作栏', width: 120, align: 'center', templet: function (d) {
                        if (d.status === 0) {
                            return `<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="pay">去支付</button>`
                        } else if (d.status === 2){
                            return `<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="con">确认收货</button>`
                        }else if (d.status === 1){
                            return `<button type="button" class="layui-btn ">已支付</button>`
                        }else {
                            return `<button type="button" class="layui-btn layui-btn-disabled">订单失效</button>`
                        }
                    }
                }
            ]]
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    //向服务端发送删除指令
                    // $.ajax({
                    //     url: '/order/delOrderById',
                    //     data: {id: data.id},
                    //     dataType: 'json',
                    //     type: 'post',
                    //     success: function (res) {
                    //         if (res.code === 0) {
                    //             obj.del(); //删除对应行（tr）的DOM结构
                    //             layer.close(index);
                    //             // table.reload();
                    //             $(".layui-laypage-btn").click();
                    //         }
                    //     }
                    // });
                });
            } else if (layEvent === 'edit') {
                layer.msg('编辑操作');
            } else if (layEvent === 'pay') {
                // console.log(data);
                $.ajax({
                    url: "/order/personOrderCommits",
                    type: "POST",
                    dataType: "json",
                    data: JSON.stringify(data),
                    contentType: "application/json;charset=utf-8",
                    success: function (res) {
                        if (res.code === 0) {
                            window.location.href="/alipay/pay";
                        }
                    }
                });
            }else if (layEvent === 'con'){
                $.ajax({
                    url: "/order/confirmReceipt",
                    type: "post",
                    dataType: "json",
                    data: {id: data.id},
                    success: function (res) {
                        if (res.code === 0) {
                            layer.alert('收货成功！', {
                                time: 1000,
                                icon: 1,
                                skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                            });
                            setTimeout(function () {
                                $(".layui-laypage-btn").click();
                            },2000);
                        }
                    }
                })
            }
        });

        $('#searchPro').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //table重载
        var $ = layui.$, active = {
            reload: function () {
                var orderId = $('#demoReload').val();
                var productName = $("#productName").val();
                $("#username").val();
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        orderId: orderId,
                        productName: productName
                    }
                }, 'data');
            }
        };
        //分页
        laypage.render({
            elem: 'id' //分页容器的id
            , count: 100 //总页数
            , skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', {offset: 'b'});
                }
            }
        });
    });
</script>
</body>
</html>